<template>
  <div class="task">
    <div class="task_btn">
      
      <el-button @click="add_list" v-if="adminShow">添加信息</el-button>
      <div class="search">
        <input type="text" v-model="search" />
        <button @click="searchd">搜索</button>
      </div>
    </div>
    <el-table :data="tableData" border class="task_table" @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column prop="title" label="信息标题" width="400"> </el-table-column>
      <el-table-column prop="name" label="分类" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.classify }}/{{ scope.row.waferSort }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="province" label="发布时间" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.add_time | formatDated }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="摘要" width=""> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" style="color: #31bdce" @click="edit(scope.row)" v-if="adminShow">编辑</el-button>
          <el-button type="text" size="small" style="color: #f56c6c" @click="deleted(scope.row)" v-if="adminShow">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, prev, pager, next"
      style="text-align: right; margin-top: 15px"
      :total="totals"
    >
    </el-pagination>

    <!-- 查看详情 -->
    <el-drawer title="我是标题" :visible.sync="drawer" class="drawer" :with-header="false">
      <div class="news_details">
        <div class="news_title">
          <h3>{{ newdetails.title }}</h3>
          <span>作者：{{ newdetails.username }}</span>
          <span>时间：{{ newdetails.add_time | formatDated }}</span>
        </div>
        <div class="news_cn">
          <p v-html="newdetails.content"></p>
        </div>
        <div class="accessoryBox"><a :href="newdetails.file">查看附件</a></div>
        <div class="iframe">
          <iframe :src="newdetails.file" frameborder="0"></iframe>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
 
<script>
import { newList, newQuery, newDel, userInfo } from '@/utils/index.js'

export default {
  props: ['ctypeTwo', 'ctype'],
  data() {
    return {
      search: '',
      tableData: [],
      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4,
      drawer: false,
      // 详情
      ruleForm: {
        username: '',
        type: '',
        date: '',
        company: '',
      },
      rules: {},
      optionsd: [],
      options: [],
      dialogVisible: false,
      dialogImageUrl: '',
      fileList: [{ name: 'food.jpg', url: 'https://gifts-1027411-pic45.websiteonline.cn/upload/bb.jpg' }],
      // 任务id
      rowId: '',
      newdetails: [],
      totals: 0,
      route: this.$route.query.id,
      // 用户资料
      adminShow: false
    }
  },
  watch: {
    ctype(val) {
      //普通的watch监听
      newList({
        type: this.type,
        ctype: val,
      }).then((res) => {
        console.log(res)
        this.tableData = res.data.data
        this.totals = res.data.total
      })
    },
    $route: {
      handler(to) {
        console.log(to.query.id)
        newList({
          type: to.query.id,
          ctype: this.ctype,
        }).then((res) => {
          console.log(res)
          this.tableData = res.data.data
          this.totals = res.data.total
        })
        userInfo().then((res)=>{
          console.log(res)
          if(res.data.userid == 10000) {
              this.adminShow = true     
          }
        })
      },   
      // 深度观察监听
      deep: true,
    },
    
    ctypeTwo(val) {
      //普通的watch监听
      newList({
        type: this.type,
        ctype: val,
      }).then((res) => {
        console.log(res)
        this.tableData = res.data.data
        this.totals = res.data.total
      })
    },
  },
  created() {
    newList({
      type: this.$route.query.id,
      ctype: this.ctype,
    }).then((res) => {
      console.log(res)
      this.tableData = res.data.data
      this.totals = res.data.total
    })
    userInfo().then((res)=>{
      console.log(res)
      if(res.data.userid == 10000) {
          this.adminShow = true     
      }
    })
  },
  methods: {
    searchd() {
      newList({
        title: this.search,
        type: this.type,
        ctype: this.ctype,
      }).then((res) => {
        console.log(res)
        this.tableData = res.data.data
        this.totals = res.data.total
      })
    },
    // 新增新闻
    add_list() {
      this.$router.push('/add_news')
    },
    // 表格操作
    handleClick(row) {
      console.log(row)
      this.drawer = true
      this.dialogImageUrl = 'https://gifts-1027411-pic45.websiteonline.cn/upload/bb.jpg'
      newQuery({
        id: row.id,
      }).then((res) => {
        this.newdetails = res.data
        console.log(res)
      })
    },
    edit(row) {
      console.log(row)
      this.rowId = row.id
      localStorage.clear()
      // window.localStorage.setItem('newid',row.id)
      this.$router.push({ path: '/edit_news', query: { newId: row.id } })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 删除
    deleted(val) {
      console.log(val)
      this.$confirm('此操作将永久删除该新闻, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          newDel({
            id: val.id,
          }).then((res) => {
            if (res.code == '0') {
              this.$message.closeAll()
              this.$message.success('删除成功')
              setTimeout(() => {
                newList().then((res) => {
                  console.log(res)
                  this.tableData = res.data.data
                  this.totals = res.data.total
                })
              }, 800)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      newList({
        page: val,
      }).then((res) => {
        this.tableData = res.data.data
        this.totals = res.data.total
      })
    },
    // 上传视频
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.iframe{
  width: 100%;
  height: calc(100vh - 200px);
  iframe{
    width: 100%;
    height: 100%;
  }
}
.task_btn {
  padding: 0 15px;
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}
.task_btn button {
  background-color: #31bdce;
  color: white;
}
.search {
  float: right;
  font-size: 0;
  border: 1px solid #ccc;
}
.search input {
  height: 36px;
  vertical-align: top;
  border: 0;
  outline: none;
  padding: 0 7px;
  font-size: 14px;
}
.search button {
  height: 36px;
  border: 0;
  padding: 0 20px;
}
.task_table::v-deep {
  margin-top: 30px;
  box-sizing: border-box;
}
.el-pagination {
  font-weight: 500;
}
.drawer::v-deep {
  .el-drawer {
    width: 60% !important;
  }
}
.wrap {
  width: 70%;
  position: relative;
  // padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
  height: 400px;
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.news_details {
  max-width: 900px;
  margin: auto;
  padding: 50px 70px;
  .news_title {
    text-align: center;
    span {
      margin-right: 15px;
    }
    h3 {
      font-size: 20px;
      line-height: 40px;
    }
    margin-bottom: 15px;
  }
  .news_cn {
    text-indent: 24px;
    img {
      display: block;
      max-width: 650px;
      margin: 15px auto;
    }
  }
}
.accessoryBox {
  margin: 20px;
}
</style>